<template>
  <div class="navBar" :style="styles">
    <img src="../assets/back-arrow@3x.png" class="backArrow" @click="back">
      {{title}}
  </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            value: ''
        },
        styles:{
            type: Object,
            default:()=>({
                background: '#000',
                color: '#fff'
            })
        }
    },
    methods: {
        back() {
            this.$router.back();
        }
    }
}

</script>
<style lang="scss" scoped>
.navBar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-size: 0.18rem;
    height: 0.45rem;
    background: #dd3333;
    .backArrow {
        position: absolute;
        width: 0.08rem;
        height: 0.16rem;
        color: #fff;
        left: 0.14rem;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>